<template>
  <div class="wap-container enReceiveOrder" id="container">
    <div class="order-info">
      <ul class="pl10 pb15">
        <li class="rowflex">
          <div class="info-item c666 ">工单编号</div>
          <div>{{orderInfo.code}}<span class="ml10">{{_dateFormat(orderInfo.createdTime)}}</span>  </div>
        </li>
        <li class="rowflex">
          <div class="info-item c666">联系人</div>
          <div>{{orderInfo.linkMan}}</div>
        </li>
        <li class="rowflex">
          <div class="info-item c666">联系电话</div>
          <div>{{orderInfo.linkPhone}}</div>
        </li>
        <li class="rowflex" v-if="false">
          <div class="info-item c666" >流程模板</div>
          <div>{{orderInfo}}</div>
        </li>
        <li class="rowflex" v-if="orderInfo.county">
          <div class="info-item c666 ">区县</div>
          <div>{{orderInfo.county}}</div>
        </li>
        <li class="rowflex" v-if="orderInfo.customer">
          <div class="info-item c666 " >服务对象</div>
          <div>{{orderInfo.customer.customerName}}</div>
        </li>
        <div class="warrantyStatus" v-if="orderInfo.equipment">
          <span v-if="orderInfo.equipment.warrantyTime">维保到期日期：{{orderInfo.equipment.warrantyTime}}</span>
          <span v-if="orderInfo.equipment.warrantyStatus">维保状态：{{orderInfo.equipment.warrantyStatus}}</span>
        </div>
        <li class="rowflex" v-if="orderInfo.equipment">
          <div class="info-item c666">设备编号</div>
          <div>{{orderInfo.equipment.equipmentNo}}</div>
        </li>
        <li class="rowflex" v-if="picList.length > 0">
          <div class="info-item c666">故障照片</div>
          <div class="pic-box">
            <div class="pics rowflex">
              <div @click="show(index)" v-for="(item,index) in picList" class="picItem previewer-img" v-bind:style="{backgroundImage: 'url(http://'+item+')', backgroundSize: 'cover' }"></div>
            </div>
          </div>
        </li>
        <li class="rowflex">
          <div class="info-item c666 ">工作内容</div>
          <div class="errorDescription">{{orderInfo.errorDescription}}</div>
        </li>

      </ul>
    </div>

    <div v-transfer-dom>
      <previewer :list="bigImgPath" ref="previewer" :options="options"></previewer>
    </div>

    <section class="bottom_bar cfff rowflex" v-if="orderInfo.systemStatus === 1">
      <div @click="receiveOrder(0)" class="bottom_bar_right">退回</div>
      <div @click="receiveOrder(1)" class="bottom_bar_left">接单</div>
    </section>
  </div>
</template>

<script>
    import {TransferDom, Previewer} from 'vux'
    export default {
      name: "EnReceiveOrder",
      components: {Previewer},
      directives: {
        TransferDom
      },
      data(){
        return {
          Gparam: {
            bar: 1,
            jiedanNew: 0,
            chuliNew: 0,
            wanchengNew: 0,
          },
          orderId: '',
          userInfo: {},
          orderInfo: {
            equipment: {},
          },
          rows: [],
          allRows: [],
          jiedanRows: [],
          chuliRows: [],
          wanchengRows: [],
          picList: [],
          bigImgPath: [],
          //图片预览
          options: {
            getThumbBoundsFn(index) {
              let thumbnail = document.querySelectorAll('.enReceiveOrder .previewer-img')[index]
              let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
              let rect = thumbnail.getBoundingClientRect()
              return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
            }
          },
        }
      },
      methods: {
        //图片预览
        show(index) {
          console.log(index)
          this.$refs.previewer.show(index)
        },
        showBig() {
          this.showBigPicture = !this.showBigPicture;
        },
        goBack: function (){
          this.$router.go(-1)
        },
        receiveOrder: function (param) {
          let data
          if (param === 1){
            data = true
          } else if (param === 0){
            data = false
          }
          this.$http.put('/work/api/workorder/received/'+this.orderId,data,{headers:{"Content-Type": "application/json"}}).then(res=>{
              console.log(res)
              if (param === 1) {
                this.$router.push({path: '/engineer/enWorkingOrder', query: {orderId: this.orderId}})
              } else if (param === 0){
                this.$router.push({path: '/engineer/enMyOrders'})
              }
            }
          )
        },
      },
      mounted(){
        let id = this.$route.query.orderId
        console.log(this.$route.query.orderId)
        this.orderId = id
        this.$http.get('/work/api/workorder/'+id).then(res=>{
          this.orderInfo = res.data.data
          if (this.orderInfo.repairFileStore) {
            let key = this.orderInfo.repairFileStore
            this.$http.get('/work/api/upload/byid?ids='+key).then(res=>{
              let result = res.data.data[key]
              for (var i = 0 ; i < result.length; i++){
                this.picList.push(result[i].path)
              }
              //如果有多张则在预览图中显示
              this.bigImgPath = res.data.data[key].map(item => {
                return {msrc:this._getPathNo(item.path), src: this._getPathNo(item.path)}
              })
            })
          }
        })
      },
    }
</script>

<style lang="less">
  .enReceiveOrder {
    font-size: 0.13rem;
    background-color: #fff;
    .top, .bottom {
      border-radius: 0.04rem;
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
    }
    .top-title, .bottom-title {
      padding-top: 0.08rem;
      height: 0.43rem;
      line-height: 0.35rem;
      font-size: 0.15rem;
      text-align: center;
      border-bottom: solid 1px #ebebeb;
    }
    .order-info {
      font-size: 0.15rem;
      border-bottom: solid 1px #ebebeb;
      margin-top: 0;
    }
    .order-info ul {
      border-bottom: solid 1px #eee;
      padding-top: 0.01rem;
    }
    .order-info ul li {
      margin-top: 0.1rem;
      line-height: 0.15rem;
    }
    .errorDescription{
      width: 2.75rem;
      line-height: normal;
      margin-top: -0.03rem;
    }
    .warrantyStatus{
      display: flex;
      justify-content: space-between;
      width: 2.75rem;
      margin-left: 0.75rem;
      font-size: 0.13rem;
    }
    .order-info .info-item {
      width: 0.75rem;
    }
    .picAndvioce-box {
      width: 100%;
      padding-left: 0.1rem;
      padding-bottom: 0.01rem;
    }
    .pic-box{
      width: 2.75rem;
    }
    .pics{
      overflow-x: auto;
    }
    .picItem{
      width: 1.3rem;
      height: 0.85rem;
      margin-right: 0.05rem;
      margin-top: 0.04rem;
      -webkit-border-radius: 0.025rem;
      -moz-border-radius: 0.025rem;
      border-radius: 0.025rem;
      -webkit-background-size: cover;
      background-size: cover;
    }
    .readVioce {
      background-color: #42a3fd;
      width: 0.9rem;
      height: 0.4rem;
      line-height: 0.4rem;
      color: #fff;
      -webkit-border-radius: 0.025rem;
      -moz-border-radius: 0.025rem;
      border-radius: 0.025rem;
    }
    .readVioce img {
      margin-left: 0.1rem;
      width: 0.3rem;
      height: 0.3rem;
    }
    .isRead {
      width: 0.12rem;
      height: 0.12rem;
      margin-left: 0.05rem;
      margin-top: 0.14rem;
      background-color: #fa4a30;
      -webkit-border-radius: 0.12rem;
      -moz-border-radius: 0.12rem;
      border-radius: 0.12rem;
    }
    .bottom-content li {
      line-height: 0.15rem;
      margin-top: 0.15rem;
      margin-left: 0.1rem;
      font-size: 0.15rem;
    }
    .bottom_bar {
      width: 100%;
      background: #42a3fd;
      line-height: 0.43rem;
      font-size: 0.15rem;
      text-align: center;
    }
    .bottom_bar_left {
      width: 50%;
      background-color: #42a3fd;
    }
    .bottom_bar_right {
      width: 50%;
      background-color: #df5262;
    }
  }
</style>
